<template>
  <div>
    <div class="title_bg">
      <div class="container title_box b_d flex f_align f_bet">
        <div class="rel t_center font_28 c_28" @click="back">
          <span>取消</span>
        </div>
        <div class="font_36 c_28">
          <span>发动态</span>
        </div>
        <div class="rel t_center font_28 c_28">
          <span @click="send2()">发送</span>
        </div>
      </div>
    </div>
    <div class="container m_t30 m_d30">
      <textarea
        placeholder="这一刻的想法..."
        class="w1 texteara font_28 c_28"
        v-model="content"
        maxlength="200"
      ></textarea>
    </div>
    <ul class="ulone1">
      <li v-for="(item,index) in uploadData" :key="index">
        <img :src="item" alt="">
      </li>
      <li>
        <van-uploader :after-read="onRead" multiple>
          <img src="../../../assets/img/add.png" alt="">
        </van-uploader>
      </li>
    </ul>
    <div class="container m_d40 flex f_align">
        <input @click="gaibian()" type="checkbox" :checked="checked">
        <div class="font_26 c_44 m_l20">
            <span>图片是否发表到舞会相册</span>
        </div>
    </div>

    <div class="pull-down">
      <span>{{actytype2}}</span>
      <span @click="ulbol33()">
        <img :src="'./static/lyl/xiasan.png'" alt="">
      </span>
      <ul v-if="ulbol3">
        <li @click="checkeds3(item)" v-for="(item,index) in actiData" :key="index">{{item.title}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
  import {Dialog} from 'vant';
  import * as common from "../../../api/common.js";
export default {
  data() {
    return {
      ulbol3:false,
      content: "",
      checked:true,
      uploadData:[],
      actytype2:'选择您要发起的活动',
      actiData:[],
      actId:''
    };
  },
  beforeMount(){
    let parms = {user_id:this.$store.state.user_id};
    common.myActive(parms).then(res=>{
       console.log(res);
       this.actiData = res.data;
    })
  },
  mounted(){
    mui.back = function() {
      window.history.go(-1);
    }
  },
  methods:{
    onRead(file) {
      if (Array.isArray(file)) {
        for (let i = 0,len = file.length; i < len; i++) {
          this.uploadData.push(file[i].content)
        }
      }else{
        this.uploadData.push(file.content);
      }
    },
    ulbol33(){
      this.ulbol3 = !this.ulbol3;
      if (this.actiData.length==0) {
        Dialog.alert({
          message: '您还没有参加过活动，不能发送动态'
        })
      }
    },
    checkeds3(itl){
      this.actytype2 = itl.title;
      this.actId = itl.id;
      this.ulbol3 = false;
    },
    send2(){
      var str = '';
      for (let i = 0,len = this.uploadData.length; i < len; i++) {
        str+=(this.uploadData[i]+'|||');
      }
      if (this.content.length==0||this.$store.state.user_id.length==0||this.actId.length==0){
        Dialog.alert({
          message: '请完善您的信息'
        })
      } else{
        let parms = {
          user_id:this.$store.state.user_id,
          active_id:this.actId,
          content:this.content,
          image:str,
          is_upload:this.checked?1:0
        };
        //console.log(parms);
        common.sendDynamic(parms).then(res=>{
          console.log(res);
          //if (res.status==200) {
            Dialog.alert({
              message: '发布成功'
            }).then(()=>{
              history.go(-1);
            });
          //}
        })
      }

    },
    gaibian(){
      this.checked = !this.checked;
    },
      back(){
          this.$router.go(-1)
      }
  }
};
</script>
<style scoped>
.title_bg {
  width: 100%;
  height: 100px;
}
.title_box {
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
}
.rel {
  width: 96px;
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #48c261;
}
.rel span{
  color: #fff;
}
.texteara {
  border: 0;
  line-height: 50px;
  outline: 0;
  min-height: 300px;
  caret-color:#48c261;
}

.img_box{
    width: 33%;
    text-align: center;
}
.img_box img{
    width: 210px;
    height: 256px;
    border: 1px solid red;
    box-sizing: border-box;
}

.select{
    width: 370px;
    height: 70px;
    line-height: 70px;
}
  .ulone1{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
  }
.ulone1 li{
    width: 210px;
    height: 255px;
    padding: 0 20px 20px 0;
  }
.ulone1 li:nth-child(3n+3){
  padding-right: 0;
  }
.ulone1 li img{
    width: 100%;
    height: 100%;
  }

  .pull-down{
    position: relative;
    padding: 20px 40px;
    display: flex;
  }
.pull-down span:nth-child(1){
  width: 280px;
  height: 60px;
  line-height: 60px;
  padding:0 20px;
  font-size: 26px;
  border: 2px solid;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.pull-down ul{
  position: absolute;
  left: 40px;
  top: 80px;
  border: 2px solid;
  border-top: 0;
  padding: 0;
}
.pull-down ul li{
  width: 330px;
  height: 60px;
  line-height: 60px;
  margin: 0;
  padding:0 20px;
  font-size: 26px;
  overflow-x: scroll;
  white-space: nowrap;
}
.pull-down span:nth-child(2){
  width: 50px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 2px solid;
  border-left: none;
}
.pull-down span:nth-child(2) img{
  width: 16px;
  height: 14px;
}
</style>

